<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件</title>
    <style>
        .wrapper {
            border: 1px solid blue;
            width: 400px;
            height: 100px;
            margin: 25px auto;
        }
    </style>
</head>

<body>

    <div class="wrapper" id="first"></div>

    <script type="text/javascript">
        var w;
        //判断浏览器中是否有document.querySelector函数
        if (document.querySelector) {
            w = document.querySelector('.wrapper');
        } else {
            w = document.getElementById('first');
            console.log(w);
        }
        //事件类型：双击
        var type = 'dblclick'; // mouseover
        var listener = function(event) {
            var e = event || window.event;
            var t = e.target || e.srcElement;
            console.log(e, t);
        }
        var capture = false;

        /*
        if( w.addEventListener ){
            w.addEventListener( type , listener , capture );
        } else {
            // 在早期IE中事件类型必须以 on 开头
            w.attachEvent( 'on' + type , listener );
        }*/

        w.addEventListener ? w.addEventListener(type, listener, capture) : w.attachEvent('on' + type, listener);
    </script>

</body>

</html>